<template>
  <div>
    <div class="top-search">
      <span> 销售SKU：<a-input :maxLength="128" v-model="SKUsellData.saleSkuCode" /> </span>
      <span> 系统SKU：<a-input :maxLength="128" v-model="SKUsellData.skus" /> </span>
      <span>
        创建时间：
        <a-range-picker
          :placeholder="['年/月/日', '年/月/日']"
          format="YYYY-MM-DD"
          v-model="dateTime"
          @change="DateChange"
      /></span>
      <span>
        <a-button
          style="margin-right: 20px"
          type="primary"
          class="top-btn"
          @click="searchBtn"
        >
          查询
        </a-button>
        <a-button type="primary" class="top-btn" @click="reset">
          重置
        </a-button>
      </span>
    </div>
    <div class="topBtn" style="margin: 10px 0">
      <span>
        <a-button
          type="primary"
          style="background: #409cff; color: #ffff; border: none"
          @click="showModel('visibleAddSKU')"
        >
          新建销售SKU
        </a-button>
      </span>
      <span>
        <a-button
          @click="showModel('visibleToSKU')"
          type="primary"
          style="background: #409cff; color: #ffff; border: none"
        >
          批量导入SKU
        </a-button>
      </span>
      <span>
        <a
          href="javascript:;"
          style="border-bottom: 1px solid #2929e0; color: #2929e0"
          @click="SKUUpDow"
          >下载批量导入模板</a
        >
      </span>
    </div>
    <a-spin tip="Loading..." :spinning="spinning">
      <a-table
        :columns="columns"
        :data-source="SKUTablieData"
        :pagination="false"
        :scroll="{ x: 1500 }"
      >
        <span slot="skus" class="action" slot-scope="text, record">
          <span v-html="record.skus.replace(/\,/g, '</br>')"> </span>
        </span>
        <span slot="createTime" class="action" slot-scope="text, record">
          {{ record.createTime | dateFilters }}
        </span>
        <span slot="action" class="action" slot-scope="text, record">
          <a slot="action" href="javascript:;" @click="eidtRow(record)">编辑</a>
          <a-divider type="vertical" />
          <a-popconfirm
            title="确定删除该条数据吗?"
            ok-text="确定"
            cancel-text="取消"
            @confirm="deleteRow(record)"
          >
            <a href="javascript:;">删除</a>
          </a-popconfirm>
        </span>
      </a-table>
    </a-spin>
    <!-- 分页器 -->
    <div style="margin: 20px 0; text-align: center">
      <a-config-provider :locale="locale">
        <a-pagination
          show-size-changer
          :pageSizeOptions="['10', '20', '30']"
          :show-total="
            total => `${$t('m.page.Total')} ${total} ${$t('m.page.items')}`
          "
          @showSizeChange="showChange"
          :buildOptionText="
            props => ` ${props.value} ${$t('m.page.a')}/${$t('m.page.page')}`
          "
          show-quick-jumper
          :current="SKUsellData.current"
          :total="total"
          @change="onChangePage"
        />
      </a-config-provider>
    </div>

    <!-- 新增销售SKU模态框 -->
    <AddSKUSellModel :getTabSKUsellData="getTabSKUsellData" />
    <!-- 批量导入sku模态框 -->
    <BatchToSKUModel :getTabSKUsellData="getTabSKUsellData" />
  </div>
</template>

<script>
import AddSKUSellModel from "@/components/clientSide/SKUManage/SKUsell/AddSKUSellModel.vue";
import BatchToSKUModel from "@/components/clientSide/SKUManage/SKUsell/BatchToSKUModel.vue";
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
import {
  SKUSell_page,
  SKUSell_upDow,
  SKUSell_delete
} from "@/apis/clientSide/SKUManage/SKUsell";
import moment from "moment";
export default {
  components: {
    AddSKUSellModel,
    BatchToSKUModel
  },
  created() {
    this.getTabSKUsellData();
  },
  data() {
    return {
      dateTime: [],
      startTime: null,
      endTime: null,
      locale,
      total: 5,
      SKUTablieData: [],
      SKUsellData: {
        chineseName: "",
        createBy: 0,
        createTime: "",
        current: 1,
        endTime: "",
        fkList: [
          {
            createBy: 0,
            createTime: "",
            remarks: "",
            revision: 0,
            saleSkuFkId: 0,
            saleSkuId: 0,
            skuAmount: 0,
            skuId: 0,
            tenantId: 0,
            updateBy: 0,
            updateTime: ""
          }
        ],
        remarks: "",
        revision: 0,
        saleSkuCode: "",
        saleSkuId: 0,
        size: 10,
        skuAmount: 0,
        skuId: 0,
        skus: "",
        startTime: "",
        tenantId: 0,
        updateBy: 0,
        updateTime: ""
      }
    };
  },
  methods: {
    disabledDate(current) {
      // Can not select days before today and today
      return (
        current && current < moment(this.SKUsellData.startTime).endOf("day")
      );
    },
    //重置按钮
    reset() {
      this.SKUsellData.saleSkuCode = "";
      this.SKUsellData.skus = "";
      this.SKUsellData.startTime = "";
      this.SKUsellData.endTime = "";
      this.startTime = null;
      this.endTime = null;
      this.dateTime = [];
      this.getTabSKUsellData();
    },
    // 点击查询
    searchBtn() {
      this.getTabSKUsellData();
    },
    //删除每一行
    async deleteRow(rowData) {
      let { code } = await SKUSell_delete({
        key: rowData.key,
        revision: rowData.revision
      });
      if (code === "10000") {
        this.getTabSKUsellData();
      }
    },
    // 下载模板
    async SKUUpDow() {
      let res = await SKUSell_upDow();
      const blob = new Blob([res], {
        type: "application/vnd.ms-excel"
      });
      const fileName = "系统SKU列表模板.xlsx";
      const linkNode = document.createElement("a");
      linkNode.download = fileName; //a标签的download属性规定下载文件的名称
      linkNode.style.display = "none";
      linkNode.href = URL.createObjectURL(blob); //生成一个Blob URL
      document.body.appendChild(linkNode);
      linkNode.click(); //模拟在按钮上的一次鼠标单击
      URL.revokeObjectURL(linkNode.href); // 释放URL 对象
      document.body.removeChild(linkNode);
    },
    eidtRow(rowData) {
      setTimeout(() => {
        this.$bus.$emit("SkuSellRowData", rowData);
      }, 50);
    },
    //搜索日期选择器
    DateChange(date, dateString) {
      date;
      if (dateString && dateString.length > 0) {
        this.SKUsellData.startTime = `${dateString[0]} 00:00:00`;
        this.SKUsellData.endTime = `${dateString[1]} 23:59:59`;
      } else {
        this.SKUsellData.startTime = "";
        this.SKUsellData.endTime = "";
      }
    },

    // 打开模态框
    showModel(flag) {
      if (flag === "visibleAddSKU") {
        setTimeout(() => {
          this.$bus.$emit("visibleAddSKU");
        }, 50);
      } else if (flag === "visibleToSKU") {
        setTimeout(() => {
          this.$bus.$emit("visibleToSKU");
        }, 50);
      }
    },

    //分页器事件
    onChangePage(pageNumber) {
      this.SKUsellData.current = pageNumber;
      this.getTabSKUsellData();
    },
    //页码变更
    showChange(size, current) {
      this.SKUsellData.current = size;
      this.SKUsellData.size = current;
      this.getTabSKUsellData();
    },
    async getTabSKUsellData() {
      this.spinning = true;
      let { code, responseBody } = await SKUSell_page(this.SKUsellData);
      if (code === "200") {
        this.total = responseBody.total * 1;
        this.SKUTablieData = responseBody.records;
        // this.SKUTablieData.forEach((item, i) => {
        //   item.IDX = i + this.SKUsellData.current * this.SKUsellData.size - 9;
        // });
        this.spinning = false;
      }
    }
  },
  computed: {
    columns() {
      return [
        // {
        //   title: "序号",
        //   dataIndex: "IDX",
        //   align: "center",
        //   // width: "5%",
        //   ellipsis: true
        // },
        {
          title: "销售SKU",
          dataIndex: "saleSkuCode",
          align: "center",
          // scopedSlots: { customRender: "selfClassifyName" },
          ellipsis: true
          // width: "5%",
        },
        {
          title: "匹配系统SKU",
          dataIndex: "skus",
          align: "center",
          // width: "16%",
          ellipsis: true,
          scopedSlots: { customRender: "skus" }
        },
        {
          title: "创建时间",
          dataIndex: "createTime",
          ellipsis: true,
          scopedSlots: { customRender: "createTime" },
          align: "center"
          // width: "16%",
        },
        {
          title: "备注",
          dataIndex: "remarks",
          scopedSlots: { customRender: "remarks" },
          align: "center",
          // width: "16%",
          ellipsis: true
        },
        {
          title: "操作",
          dataIndex: "action",
          scopedSlots: { customRender: "action" },
          align: "center",
          width: 200,
          fixed: "right"
        }
      ];
    }
  },
  filters: {
    dateFilters(Value) {
      if (Value) {
        return Value.replace("T", "    ");
      }
    }
  }
};
</script>

<style lang="less" scoped>
input {
  width: auto;
}
.action {
  a {
    border-bottom: 1px solid rgb(41, 41, 224);
    color: rgb(41, 41, 224);
  }
}
.top-search {
  span {
    margin: 0 15px;
    input {
      width: 100px;
    }
  }
  .top-btn {
    background: #fff;
    color: #3eae7c;
    text-shadow: none;
  }
  .top-btn:hover {
    background: #3eae7c;
    color: #fff;
  }
}
.topBtn {
  span {
    margin: 10px;
  }
}
</style>
